<fm-deliver-to></fm-deliver-to>


<div class="container fm-restaurant">

  <div class="row">
    <div class="span2">
      <img src="img/restaurants/angular.jpg" class="img-rounded">
    </div>

    <div class="span10">
      <h3>{{restaurant.name}}</h3>

      <div class="row">
        <div class="span2">
          <div>{{restaurant.address}}</div>

          <fm-rating ng-model="$parent.restaurant.rating" readonly="true"></fm-rating>
          <fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"></fm-rating>

        </div>
        <div class="span4">
          <div>{{restaurant.description}}</div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="row-fluid">

  <div class="span8 fm-panel fm-menu-list">
    <h4>Menu</h4>


    <ul>
      <li ng-repeat="menuItem in restaurant.menuItems">
        <a href ng-click="cart.add(menuItem, restaurant)">
          <span>{{menuItem.name}}</span>
          <span>{{menuItem.price}}</span>
          <i class="icon-plus-sign"></i>
        </a>
      </li>
    </ul>

  </div>

  <div class="span4 fm-panel fm-cart">
    <h4>Your order</h4>
    <form>
      <ul class="unstyled">
        <li ng-repeat="item in cart.items">
          <a href ng-click="cart.remove(item)"><i class="icon-remove-sign"></i></a>
          {{item.qty}} &times; {{item.name}}
        </li>
      </ul>
      <div class="pull-right" ng-show="cart.items.length">
        <a href="#/checkout" ng-disabled="!cart.items.length" class="btn">Checkout</a>
      </div>
      <p>
        <b>Total: {{cart.total() | currency}}</b>
      </p>
    </form>
  </div>

</div>
